<template>
  <div class="main">
    <van-nav-bar
      left-text="返回"
      right-text="按钮"
      left-arrow
    >
      <!-- 导航 -->
      <template #title>
        <ul class="nav">
          <li>我的</li>
          <router-link to="/find" tag="li">发现</router-link>
          <li>云村</li>
          <li>视频</li>
        </ul>
      </template>
      <!-- 左侧边栏 -->
      <template #left>
        <van-icon name="wap-nav" />
      </template>
      <!-- 右搜索 -->
      <template #right>
        <van-icon name="search" />
      </template>
    </van-nav-bar>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data: () => ({})
}
</script>
<style lang="scss">
.main {
  .van-nav-bar {
    box-shadow: 0 0 0.6px 0 #000;
    .van-nav-bar__left {
      font-size: 20px;
      margin-left: 4px;
      .van-icon {
        color: #333;
      }
    }
    .van-nav-bar__right {
      margin-right: 4px;
      font-size: 20px;
      .van-icon {
        color: #333;
      }
    }
    .nav {
      display: flex;
      li {
        margin: 0px 10px;
      }
    }
  }
}
</style>
